<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            width: 300px;
            height: 150px;
            border: 1px solid red;
        }
        #box2 {
            width: 300px;
            height: 50px;
            border: 1px solid red;
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload = function (){
            box1 = document.getElementById('box1')
            box2 = document.getElementById('box2')
            /*
            当事件相应函数被触发时，浏览器会将一个事件出发对象作为实参传递至函数
            在事件对象中包含了当前事件的一切信息，比如鼠标的坐标，键盘的哪个键被按下
             */
            box1.onmousemove = function (shijian){

                /*
                ie8浏览器不会传递事件对象，所以需要以下代码处理兼容性问题
                 */
                if (!shijian){
                    shijian = window.shijian
                }

                var x = shijian.clientX
                var y = shijian.clientY
                box2.innerHTML = 'X坐标'+x+'Y坐标'+y
            }

        }
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>